<template>
    <div class="wrap">
    	<mt-header title="注册" :fixed="true">
		  <img src="../../assets/nav_back.png" @click="back"  slot="left"  style="width: 0.4rem;margin-left: 0.4rem;"/>
		</mt-header>
    	<v-Content>
	        <div class="list">
	            <span>手机号</span>
	            <input type="tel" maxlength="11" v-model='phone' placeholder='请输入手机号' @keyup='isPhoneClean'>
	            <img src="../../assets/icon_clean.png" class="rIcon" v-show="isphone" @click='cleanPhone' alt="">
	        </div>
	        <div class="list">
	            <span>验证码&nbsp;&nbsp;&nbsp;</span>
	            <input type="tel" maxlength="6" v-model='phoneCode' placeholder='请输入验证码'>
	            <span @click='getphoneCode' v-text='phoneCodetitle' class="rIcon cdspan"></span>
	        </div>
	    
	        <v-button buttonText='下一步' :isActive='isActive' topNum='0.8rem' @toNext='confirm'></v-button>
	        <div class="islogin">
	            已有帐号？
	            <router-link class="tologin" to='/'>请登录</router-link>
	        </div>
        </v-Content>
    </div>
</template>
<script>
import login from '@/api/login/index'
import Button from '@/components/Button'
import { toast, isPhone, isPassWord } from '@/util/index'
import Content from '@/components/ContentBottom'
import { Header,MessageBox } from 'mint-ui'
export default {
    data() {
        return {
            phone: '',
            phoneCodetitle: '获取验证码',
            isphone: false,
            count: 60,
            phoneCode: '',
            code:"",
            openId:"",
            userName:"",
            imgUrl:"",
            
        }
    },
    computed: {
        isActive: function () {
            if (isPhone(this.phone) && this.phoneCode.length>0) {
                return true
            } else {
                return false
            }
        }
    },
    components: {
        'v-button': Button,
        "mt-header":Header,
		"v-Content":Content
    },
    methods: {
        isPhoneClean() {
            if (this.phone != '') {
                this.isphone = true
            } else {
                this.isphone = false
            }
        },
        back() {
			this.$router.back(-1)
		},
        cleanPhone() {
            this.phone = ''
            this.isphone = false
        },
        getphoneCode() {
            if (isPhone(this.phone)) {
                let sendData={
                    phone:this.phone,
                    code:this.code,
                    plat:"mlj"
                }
                login.userGetRegistCode(sendData).then(data => {
                    if (data.data.code == 200) {
                    	if(data.data.data.openId){
				    		this.openId=data.data.data.openId;
				    	}
				    	if(data.data.data.userName){
				    		this.userName=data.data.data.userName;
				    	}
				    	if(data.data.data.imgUrl){
				    		this.imgUrl=data.data.data.imgUrl;
				    	}
                        this.setTime();
                    } else {
                    	toast(data.data.message);
                    }
                })
            }else{
            	toast("手机号码输入不正确");
            	
            }
        },
        setTime(){
        	if (this.count != 60) {
                return false
            }
            let timer = setInterval(() => {
                this.count--
                this.phoneCodetitle = `${this.count}秒`
                if (this.count == 0) {
                    clearInterval(timer)
                    this.phoneCodetitle = '获取验证码'
                    this.count = 60
                }
            }, 1000)
        },
        confirm() {
           
            if (this.isActive) {
                let sendData={
                    phone:this.phone,
                    phoneCode:this.phoneCode,
                     plat:"mlj"
                }
                login.userCheckRegistCode(sendData).then(data=>{
                    if(data.data.code==200){
                        this.$store.dispatch('saveRegisterPhone',this.phone)
                        this.$store.dispatch('savePhoneCode',this.phoneCode) 
                        this.$router.push({
                        	path: '/register2/',
	                        name: 'register2',
				            query: { 
				                "inviteCode": this.$route.query.inviteCode,
				                "openId":this.openId,
				                "userName":this.userName,
				                "imgUrl":this.imgUrl
				            }
	                        
                        })
                    }else{
                    	if(data.data.message="验证码已失效，请重新获取"){
                    		toast("请先获取验证码");
							this.phoneCode=""
                    	}else{
                    		toast(data.data.message);
                    		
                    	}
                        
                    }
                })
            }
        },
        
    },
    mounted(){
    	/* url 传参*/
    	
    	if(this.$route.query.code){
    		this.code=this.$route.query.code;
    	}
    	
    	
    	
    	//回填  手机号 验证码
    	if(this.$store.state.phone){
    		this.phone=this.$store.state.phone;
    	}
    	if(this.$store.state.phoneCode){
    		this.phoneCode=this.$store.state.phoneCode;
    	}
    },
     beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
}
</script>
<style lang='less' scoped>
@import '../../less/config.less';
.wrap {
    height: 100%;
    background-color: @bgColor;
    padding-top: @p30;
}

.list {
    height: 1.1733rem;
    padding: 0 @p30;
    margin-bottom: 0.34667rem;
    position: relative;
    font-size: 0.42667rem;
    color: #fff;
    background-color: #141723;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    span {
        display: inline-block;
        width: 1.70667rem;
    }
    .cdspan {
        width: 3rem;
        color: @actColor;
        right: @p30;
    }
    img {
        width: 0.42667rem;
        line-height: 1.1733rem;
        vertical-align: middle
    }
    .rIcon {
        position: absolute;
        right: @p30;
        top: 0.45rem;
        text-align: right;
    }
    input {
        padding-left: @p30;
        width: 5rem;
        color: #ffffff;
        line-height: .6rem;
        height: .6rem;
        margin-top: .25rem;
    }
    input::-webkit-input-placeholder {
        /* WebKit browsers*/
        color: @placeColor;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 4 to 18*/
        color: @placeColor;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+*/
        color: @placeColor;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10+*/
        color: @placeColor;
    }
}

.islogin {
    margin-top: 0.4rem;
    text-align: center;
    color: @Color;
    font-size: 0.38rem;
    .tologin {
        color: @actColor;
    }
}
</style>

